{% extends "base.html" %}
{% load static %}

{% block title %}
数据统计
{% endblock %}

{% block content %}
<body>
    <div class="container" style="background-color:rgba(255, 255, 255, 0.8);height: 700px;width: 1650px;">
      <h1 class="mt-5">博客数据统计</h1>
      <div class="row">
        <div class="col-md-4">
          <h2>柱状图</h2>
          <canvas id="travelChart" width="500" height="500"></canvas>
        </div>
        <div class="col-md-4">
          <h2>饼图</h2>
          <canvas id="sportsChart" width="500" height="500"></canvas>
        </div>
        <div class="col-md-4">
          <h2>折线图</h2>
          <canvas id="sceneryChart" width="500" height="500"></canvas>
        </div>
      </div>
    </div>
  
    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.staticfile.net/Chart.js/3.9.1/chart.js"></script>
    <script>
      // 准备数据
      const travelData = {
        labels: ['旅行', '运动', '美景'],
        datasets: [{
          label: '数量',
          data: [6,2,3],
          backgroundColor: [      // 设置每个柱形图的背景颜色
            'rgba(54, 162, 235, 0.5)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(255, 159, 64, 0.2)',
        ],
        borderColor: [     //设置每个柱形图边框线条颜色
            'rgba(54, 162, 235, 1)',
            'rgba(75, 192, 192)',
            'rgb(255, 159, 64)',
        ],
          borderWidth: 1
        }]
      };
  
      const sportsData = {
        labels: ['旅行', '运动', '美景'],
        datasets: [{
          label: '数量',
          data: [6,2,3],
          backgroundColor: [     
            'rgba(54, 162, 235, 0.5)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(255, 159, 64, 0.2)',
        ],
        borderColor: [    
            'rgba(54, 162, 235, 1)',
            'rgba(75, 192, 192)',
            'rgb(255, 159, 64)',
        ],
          borderWidth: 1
        }]
      };
  
      const sceneryData = {
        labels: ['旅行', '运动', '美景'],
        datasets: [{
          label: '数量',
          data: [6,2,3],
          backgroundColor: 'rgba(75, 192, 192, 0.5)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      };
  
      // 创建柱状图
      var travelChart = new Chart(document.getElementById('travelChart'), {
        type: 'bar',
        data: travelData,
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
  
      // 创建饼状图
      var sportsChart = new Chart(document.getElementById('sportsChart'), {
        type: 'pie',
        data: sportsData
      });
  
      // 创建折线图
      var sceneryChart = new Chart(document.getElementById('sceneryChart'), {
        type: 'line',
        data: sceneryData,
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    </script>
  </body>
{% endblock %}